<template>
	<view class="content">
		<projectSelect @go='go'></projectSelect>
		<view class="section-5">
			<view class="section-body">
				<view class="video-tab">
					<view class="label">
						直播现场
					</view>
					<view class="buttons">
						<view @click="curVideo = item" :class="`button ${curVideo.content === item.content ? 'button__active' : ''}`" v-for="item in videoList" :key="item.id">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="video">
					<video v-for="item in videoList" v-if="curVideo.id === item.id" :src="item.content" class="myVideo"  page-gesture autoplay></video>
					
					<!-- <view class="audio">
						<text v-if="!audioOff" @click="audioOff = true" class="iconfont icon-sound-max"></text>
						<text v-if="audioOff" @click="audioOff = false" class="iconfont icon-mute"></text>
					</view>
					<view class="full">
						<text class="iconfont icon-quanping"></text>
					</view> -->
				</view>
				<view v-if="videoList.length === 0" class="custom-empty">
					<text class="iconfont icon-zanwushuju"></text>
					<view class="empty-title">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex';
	import { siteInfoApi } from '@/api/build.js';
	import projectSelect from '@/components/project_select/index.vue'
	export default {
		components: {projectSelect},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				curRole: 'system/getCurRole',
				userInfo: 'system/getUserInfo',
			})
		},
		data() {
			return {
				curVideo: {},
				videoList: [],
				audioOff: false,
				info: {}
			}
		},
		// watch: {
		// 	curProject() {
		// 		this.setVideo();
		// 	}
		// },
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})
			},
			// setVideo() {
			// 	if (this.curProject.project_name.indexOf('青龙山220千伏开关站升压建设500千伏变电站工程') !== -1) {
			// 		// this.videoList = [
			// 		// 	{name: '北门球机', id: 1, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_1_1?expire=1676637974&id=416334894766653440&t=fb270881debce6d90f8ddf1347146ecad7600c23a277497a1616b56e228301d7&ev=100'},
			// 		// 	{name: '北门', id: 2, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_2_1?expire=1676638040&id=416335172611010560&t=79ee4c0a54cafa4c8305b27545f2b38ad33a6871f8e9c6de2bc74da51238b4f6&ev=100'},
			// 		// 	{name: '项目部停车场', id: 3, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_3_1?expire=1676638076&id=416335322506690560&t=58f1741fd7ea9ead10a3c7ac088482ff058da4c0bed9ce20dec37fa0fe96630c&ev=100'},
			// 		// 	{name: '西北角球机', id: 4, url: 'rtmp://rtmp01open.ys7.com:1935/v3/openlive/F91535597_4_1?expire=1676638107&id=416335453532921856&t=7a8d912d949602d1bfd6ec766fd91cc467e9c0cbf204db0c9c2ca71b23884271&ev=100'},
			// 		// ];
			// 		this.curVideo = this.videoList[0];
			// 	} else if (this.curProject.project_name.indexOf('大跨越线路工程') !== -1) {
			// 		// this.videoList = [
			// 		// 	{name: '南岸1', id: 1, url: 'rtmp://58.215.235.4:1957/live/southVideo1'},
			// 		// 	{name: '北岸1', id: 2, url: 'rtmp://58.215.235.4:1957/live/northVideo1'},
			// 		// ];
			// 		this.curVideo = this.videoList[0];
			// 	}
			// }
		},
		onShow() {
			siteInfoApi({project_id: this.curProject.id}).then(res => {
				const { data } = res;
				const { info } = data.data;
				this.info = data.data;
				console.log(info)
				if (Array.isArray(info)) {
					this.videoList = info.filter(item => item.type === '摄像头')
					this.curVideo = this.videoList[0] || {};
				} else {
					this.videoList = [];
				}
			})
		}
	}
</script>
<style>
	.myVideo{
		width: 100vw;
		height: 300px;
	}
</style>
<style lang="scss" scoped>
	.content{
		.section-5{
			background-color: #1534ce;
			.section-body{
				padding-top: 28rpx;
				background-color: #fff;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				overflow: hidden;
			}
			.video-tab{
				width: 670rpx;
				margin-left: 40rpx;
				margin-bottom: 22rpx;
				@include clear();
				.label{
					display: inline-block;
					float: left;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #3b3c40;
					border-bottom: 3rpx solid #95c4fa;
				}
				.buttons{
					float: left;
					.button{
						padding: 0 20rpx;
						height: 48rpx;
						background-color: #395cf5;
						border-radius: 20rpx;
						float: left;
						line-height: 48rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						transition: 0.3s ease;
						margin-right: 13rpx;
						margin-top: 22rpx;
					}
					.button__active{
						background-color: #1534ce;
					}
				}
			}
			.video{
				width: 100%;
				// height: 420rpx;
				// background-color: #000;
				position: relative;
				.audio{
					position: absolute;
					right: 40rpx;
					top: 25rpx;
					z-index: 10;
					.iconfont{
						font-size: 48rpx;
						color: #fff;
					}
				}
				.full{
					position: absolute;
					right: 40rpx;
					bottom: 25rpx;
					z-index: 10;
					.iconfont{
						font-size: 48rpx;
						color: #fff;
					}
				}
			}
		}
	}
</style>
